<template>
  <div class="edit-current-user">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>修改个人信息</span>
        </div>
      </template>
      <el-form
          ref="formRef"
          :model="form"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
          status-icon
      >
        <el-form-item label="头像" prop="avatarUrl">
          <my-upload
            type="imageCard"
            :limit="1"
            :files="form.avatarUrl"
            @setFiles="form.avatarUrl = $event"
          />
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" />
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="form.nickname" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(formRef)">
            提交
          </el-button>
          <el-button @click="resetForm(formRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import http from '@/utils/http'
import MyUpload from '@/components/MyUpload.vue'

const formRef = ref()
const form = reactive({
  username: '',
  nickname: '',
  email: '',
  avatarUrl: ''
})

const rules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' },
  ],
  nickname: [
    { required: true, message: '请输入昵称', trigger: 'blur' },
    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' },
  ],
  avatarUrl: [
    { required: true, message: '请上传头像', trigger: 'blur' }
  ]
})

// 获取用户信息
const getUserInfo = async () => {
  try {
    const res = await http.get('/user/info')
    Object.assign(form, res.data)
  } catch (error) {
    console.error('获取用户信息失败:', error)
  }
}

const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      http.put('/user/update', form).then(res => {
        ElMessage({
          message: '修改成功',
          type: 'success'
        })
        // 更新本地存储的用户信息
        http.get("/common/currentUser").then(res => {
          localStorage.setItem("currentUser", JSON.stringify(res.data))
        })
      })
    }
  })
}

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}

onMounted(() => {
  getUserInfo()
})
</script>

<style scoped>
.edit-current-user {
  max-width: 600px;
  margin: 20px auto;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style> 